<template>
  <view class="popup-mask" @tap="handleMaskClick">
    <view class="popup-container" @tap.stop>
      <view class="popup-header">支付确认</view>
      <view class="popup-content">
        <view class="amount-row">
          <view class="amount-label">支付金额</view>
          <view class="amount-value">
            <text class="price">¥{{ totalPrice }}</text>
          </view>
        </view>

        <view class="balance-row">
          <view class="balance-label">账户余额</view>
          <view class="balance-value">¥{{ info.balanceA }}</view>
        </view>

        <!-- <view class="input-group">
          <view class="input-label">如需找人代付，请输入代付人推荐码</view>
          <input
            v-model="payerName"
            type="text"
            class="input-field"
            placeholder="请输入代付人推荐码"
            @input="handleInput"
          />
        </view> -->
      </view>

      <view class="popup-content">
        <view class="ss-label">订单详情</view>
        <view class="product-list">
          <view class="product-row" v-for="item in goodsData">
            <view class="">
              <view class="p-title">{{ item.goodsName }}</view>
              <view class="p-info"
                >{{ item.specificationsName }} x {{ item.quantity }}</view
              >
            </view>
            <text class="p-price">￥{{ item.amount }}</text>
          </view>
        </view>
      </view>

      <view class="button-group">
        <button class="button button-cancel" @tap="handleCancel">取消</button>
        <button class="button button-confirm" @tap="handleConfirm">确定</button>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import Taro from "@tarojs/taro";
import { onMounted, ref, computed } from "vue";
import { store } from "@/store/index";
import http from "@/utils/http";

// 直接解构store中的响应式状态
const { info, user } = store.storeState;

const goodsData = ref([]);

const totalPrice = computed(() => {
  return goodsData.value
    .reduce((sum, item) => {
      return sum + item.amount;
    }, 0)
    .toFixed(2);
});

const props = withDefaults(
  defineProps<{
    visible: boolean;
    orderId: any;
  }>(),
  {
    visible: false,
    orderId: null,
  }
);
// const goods ref([])
onMounted(() => {
  http
    .postQuery(`/api/userOrder/getOrderDetail`, { orderId: props.orderId })
    .then((res) => {
      goodsData.value = res.data.map((i) => i.columns);
    });
});

const emit = defineEmits<{
  // (e: "update:visible", value: boolean): void;
  (e: "cancel"): void;
  (e: "confirm", param: any): void;
}>();

const payerName = ref("");

const handleMaskClick = () => {
  // emit("update:visible", false);
  emit("cancel");
};

const handleCancel = () => {
  // emit("update:visible", false);
  emit("cancel");
  http
    .postQuery("/api/userOrder/confirmPay", {
      orderId: props.orderId,
    })
    .then((res) => {
      if (res.code == 0) {
        Taro.showToast({
          title: "已取消支付",
          icon: "none",
        });
        Taro.navigateBack()
      }
    });
};

const handleConfirm = () => {
  // if (!payerName.value.trim()) {
  //   Taro.showToast({
  //     title: '请输入代付人姓名',
  //     icon: 'none'
  //   })
  //   return
  // }

  emit("confirm", {
    specificationsIds: goodsData.value.map((i) => i.specId).join(","),
    quantitys: goodsData.value.map((i) => i.amount).join(","),
  });
  emit("update:visible", false);

  // Taro.showToast({
  //   title: `确认支付给 ${payerName.value}`,
  //   icon: "none",
  // });
};

const handleInput = (e) => {
  payerName.value = e.detail.value;
};
</script>

<style lang="scss">
.popup-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
}

.popup-container {
  width: 640rpx;
  background-color: #fff;
  border-radius: 24rpx;
  overflow: hidden;
  position: relative;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
}

.popup-header {
  padding: 60rpx 48rpx 40rpx;
  text-align: center;
  font-size: 36rpx;
  font-weight: 500;
  color: #333;
  border-bottom: 2rpx solid #f5f5f5;
}

.popup-content {
  padding: 20rpx 48rpx;
}

.amount-row,
.balance-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 30rpx;
}

.amount-label,
.balance-label {
  font-size: 32rpx;
  color: #666;
}

.amount-value,
.balance-value {
  font-size: 32rpx;
  color: #333;
  font-weight: 500;
}

.amount-value .price {
  color: #ff7631;
  font-size: 40rpx;
  font-weight: bold;
}

.input-group {
  margin-bottom: 60rpx;
}

.input-label {
  font-size: 24rpx;
  color: #3c8a3f;
  margin-bottom: 20rpx;
  display: block;
}

.input-field {
  width: 100%;
  height: 88rpx;
  border: 2rpx solid #e5e5e5;
  border-radius: 8rpx;
  padding: 0 24rpx;
  font-size: 32rpx;
  color: #333;
  box-sizing: border-box;
  background-color: #f9f9f9;
}

.input-field:focus {
  outline: none;
  border-color: #ff7631;
}

.button-group {
  display: flex;
  border-top: 2rpx solid #f5f5f5;
}

.button {
  flex: 1;
  height: 176rpx;
  line-height: 176rpx;
  text-align: center;
  font-size: 32rpx;
  color: #333;
  border: none;
  background-color: #fff;
  outline: none;
  padding: 0;
  margin: 0;
  border-radius: 0;

  &::after {
    border: none;
  }
}
.ss-label {
  font-size: 32rpx;
  color: #333;
  font-weight: 500;
  margin-bottom: 20rpx;
}
.product-list {
  overflow-y: auto;
  max-height: 30vh;
}
.product-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10rpx;
  .p-title {
    font-size: 28rpx;
    color: #333;
    font-weight: 500;
  }
  .p-info {
    font-size: 24rpx;
    color: #666;
  }
  .p-price {
    font-size: 32rpx;
    color: #333;
    font-weight: 500;
  }
}

.button-cancel {
  border-right: 2rpx solid #f5f5f5;
}

.button-confirm {
  color: #ff7631;
  font-weight: 500;
}
</style>
